
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>广告位管理</h5>
                <div class="ibox-tools">

                </div>
            </div>
            <div class="ibox-content">
                <div class="filter-box">

                    <form class="filter-form" id="filter-form">
                        <div class="div-box">
                            <div class="form-div">广告位名称:
                                <label><input style="width: 80px" type="text" name="title" /></label>
                            </div>
                            <div class="form-div">
                                <label>是否开启:
                                    <select name="open">
                                        <option value="">不限</option>
                                        <option value="1">开启</option>
                                        <option value="0">关闭</option>
                                    </select>
                                </label>
                            </div>
                            <div class="form-div">
                                <div onclick="filterFun()" class="filter-submit btn btn-sm btn-primary">搜索</div>
                            </div>
                        </div>
                    </form>

                </div>

                <div class="jqGrid_wrapper">
                    <table id="table_list_1"></table>
                    <div id="pager_list_1"></div>
                </div>

            </div>
        </div>
    </div>
    <img id="large" onclick="javascript:document.getElementById('large').style.visibility='hidden'" style="position: absolute;top: 10%;left:50%;margin-left:-188px;width: 376px;z-index:3;visibility: hidden" />

</div>



<!-- 自定义js -->
<script src="/static/js/content.js?v=1.0.0"></script>

<script>


    $(document).ready(function () {

        $.jgrid.defaults.styleUI = 'Bootstrap';
        // Examle data for jqGrid

        $("#table_list_1").jqGrid({
            datatype: "json", //将这里改为使用JSON数据
            url:'index', //这是Action的请求地址
            mtype: 'POST',
            jsonReader: {
                root:"data.data", page:"data.current_page", total:"data.last_page",records:"data.total", repeatitems:true,id :"id"
            },
            // data: mydata,
            // datatype: "local",
            // height: 550,
            height: 'auto',
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            // rowList: [10, 20, 30],

            colNames: ['id','广告位名称','规格(px)','价格','广告数量','示意图','大图','操作'],
            colModel: [
                {name: 'id', index: 'id', width: 20},
                {width: 100, name:'title', index:'title'},
                {
                    width: 100,
                    name:'id',
                    formatter: function (value, grid, rows, state) {
                        return rows.width+'x'+rows.height;
                    }
                },
                {name: 'price', index: 'price', width: 60},
                {name: 'adCount', index: 'adCount', width: 60},

                {
                    width: 100,
                    name:'thumb',
                    formatter: function (value, grid, rows, state) {

                        return "<img width='60px' src='"+rows.thumb+"' />";
                    }
                }, {
                    width: 100,
                    name:'thumb',
                    formatter: function (value, grid, rows, state) {

                        return '<button onclick="largeThumb(\''+rows.thumb+'\')" class="btn btn_primary btn_mini">查看大图</button>';
                    }
                },
                {
                    width: 100,
                    name:'id',
                    formatter: function (value, grid, rows, state) {

                        var delBtnStr = "<a class=\"btn btn-danger btn-sm m-r-sm\" href=\"destory?id="+rows.id+"\">删除</a>",
                            ediBtnStr = "<a class=\"btn btn-primary btn-sm m-r-sm\" href=\"edit?id="+rows.id+"\">修改</a>";
                        return delBtnStr+ediBtnStr
                    }
                }
            ],
            pager: "#pager_list_1",
            viewrecords: true,
            hidegrid: false,

        });

        // Add selection
        $("#table_list_1").setSelection(4, true);


        // Setup buttons
        $("#table_list_1").jqGrid('navGrid', '#pager_list_1', {
            edit: false,
            add: true,
            addtext:'新增',
            addfunc:function(){

                location.href ='/ad_place/add';

            },
            del: false,
            search: false
        }, {
            height: 200,
            reloadAfterSubmit: true
        });

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            $(window).unbind("onresize");
            var width = $('.jqGrid_wrapper').width();
            $("#table_list_1").setGridHeight($(window).height() - 50);
            $('#table_list_1').setGridWidth(width);
            $(window).bind("onresize", this);
        });
    });



    function getSelecteds(){
//获取多选到的id集合
        var ids = $("#table_list_1").jqGrid("getGridParam", "selarrrow");
//遍历访问这个集合
        var tempArr=[];
        $(ids).each(function (index, id){
            //由id获得对应数据行
            var row = $("#table_list_1").jqGrid('getRowData', id);

            tempArr.push({id:row.id,check:row.check})
        })

        return tempArr;
    }
</script>

<script>


    // filterFun()
    function filterFun() {

        var filterData = $('#filter-form').serializeArray()
        console.log(filterData,$("#table_list_1"));
        //传入查询条件参数
        $("#table_list_1").jqGrid("setGridParam",{postData:filterData}).trigger("reloadGrid");

    }


    function largeThumb(thumb) {


        if(!thumb){
            layer.msg('没有图片');
            return ;
        }
        $('#large').attr('src',thumb);
        document.getElementById('large').style.visibility = 'visible'

    }
</script>

